<#include "../inc/header.ftl" />
<#import "/META-INF/spring.ftl" as spring />
<#import "/META-INF/mspring.ftl" as mspring />
<div style="padding:10px 0px 0px 10px">
	<form id="avatarForm" name="avatarForm" action="${base}/admin/self/avatar/upload" method="POST" enctype="multipart/form-data">
		<input type="file" name="avatar" />
		<input type="submit" class="btn" id="btnUpload" value="上传图像"/>
	</form>
	
	<img src="${base}/images/nophoto.gif" id="cropImage" /> <br/>
	
	<input type="button" class="btn" value="修改头像" onclick="cut()" />
	<input type="hidden" name="file" id="file"/>
	<input type="hidden" size="4" id="x1" name="x1" />
	<input type="hidden" size="4" id="y1" name="y1" />
	<input type="hidden" size="4" id="x2" name="x2" />
	<input type="hidden" size="4" id="y2" name="y2" />
</div>
<link rel="stylesheet" type="text/css" href="${base}/script/jquery-jcrop/jquery.Jcrop.min.css">
<script type="text/javascript" src="${base}/script/jquery-jcrop/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="${base}/script/jquery.form.js"></script>
<script type="text/javascript">
	turnHighLight(405010);
	function cut(){
		$.post('${base}/admin/self/avatar/save', {
			'x1':$('#x1').val(),
			'x2':$('#x2').val(),
			'y1':$('#y1').val(),
			'y2':$('#y2').val(),
			'file':$('#file').val()
		}, function(response){
			if(response.success === true){
				window.location = '${base}/admin/self/info';
			}
			else {
				mlog.dialog.tip({
					msg: response.message,
					type: 'error'
				});
			}
		});
	}
	$(document).ready(function(){
    	$("#avatarForm").ajaxForm({
    		success: function(response){
    			if(response.success === true){
    				$('#btnUpload').css('display', 'none');
    				mlog.dialog.tip({
    					msg: '头像上传成功',
    					type: 'success'
    				});
    				
    				$('#cropImage').attr('src', response.data.url);
    				$('#file').val(response.data.url);
    				
    				//可裁剪
			    	$('#cropImage').Jcrop({
			    		onChange: function(c){
				    		$('#x1').val(c.x);
						    $('#y1').val(c.y);
						    $('#x2').val(c.x2);
						    $('#y2').val(c.y2);
			    		},
			    		onSelect: function(c){
			    			$('#x1').val(c.x);
						    $('#y1').val(c.y);
						    $('#x2').val(c.x2);
						    $('#y2').val(c.y2);
			    		},
			    		onRelease: function(){
			    			$('#x1').val('');
						    $('#y1').val('');
						    $('#x2').val('');
						    $('#y2').val('');
			    		}
			    	});
    			}
    			else{
    				mlog.dialog.tip({
    					msg: response.message,
    					type: 'error'
    				});
    			}
    		}
    	});
	});
</script>
<#include "../inc/footer.ftl" />